import { cn } from "common-web";
import type { FunctionalComponent as FC } from "vue";
import { Teleport } from "vue";
import Button from "./Button";
import Panel from "./Panel";

type ModalProps = {
  visible?: boolean | null | undefined;
  width?: number;
};

type ModalEvents = {
  close(): void;
};

const Modal: FC<ModalProps, ModalEvents> = (p, { emit, slots }) => {
  return (
    <Teleport to={document.body}>
      <div
        class={cn(
          "fixed top-0 left-0 w-screen h-screen bg-black/50 m-0 p-0 flex justify-center items-start",
          p.visible || "collapse",
        )}
        style={{ zIndex: 1000 }}
      >
        <Panel class="bg-white top-[100px] mt-48" style={{ width: `${p.width || 560}px` }}>
          {{
            title: () => "xxx",
            default: () => (
              <>
                {slots.default?.()}
                <Button onClick={() => emit("close")}>Close</Button>
              </>
            ),
          }}
        </Panel>
      </div>
    </Teleport>
  );
};

Modal.props = ["visible", "width"];
Modal.emits = ["close"];

export default Modal;
